<template>
    <div class="uc-main">
      <div v-if="activeTab === 'profile'" class="info-section">
        <h2>个人资料</h2>
        <el-row :gutter="20" class="info-row">
          <el-col :span="12" v-for="(info, index) in userFields" :key="info.key">
            <el-form-item :label="info.label" class="form-item">
              <el-input 
                v-if="info.editable" 
                v-model="sanitizedUserInfo[info.key]" 
                :placeholder="info.placeholder" 
                size="small" 
              />
              <el-input 
                v-else 
                v-model="sanitizedUserInfo[info.key]" 
                :placeholder="info.placeholder" 
                size="small" 
                disabled 
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="primary" @click="updateUserInfo" style="margin-top: 20px;">提交修改</el-button>
      </div>
  
      <div v-if="activeTab === 'password'" class="info-section">
        <h2>密码安全</h2>
        <el-form-item label="原始密码" class="form-item">
          <el-input type="password" v-model="passwords.oldPassword" size="small" />
        </el-form-item>
        <el-form-item label="新密码" class="form-item">
          <el-input type="password" v-model="passwords.newPassword" size="small" />
        </el-form-item>
        <el-form-item label="确认密码" class="form-item">
          <el-input type="password" v-model="passwords.confirmPassword" size="small" />
        </el-form-item>
        <el-button type="primary" @click="updatePassword" style="margin-top: 20px;">确认修改</el-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, ref } from 'vue';
  
  const props = defineProps({
    userInfo: {
      type: Object,
      required: true,
    },
    passwords: {
      type: Object,
      required: false,
    },
  });
  
  // 使用默认值防止null
  const sanitizedUserInfo = props.userInfo || {};
  
  // 表单字段
  const userFields = [
    { label: '昵称', key: 'nickname', editable: true, placeholder: '请输入昵称' },
    { label: '性别', key: 'sex', editable: true, placeholder: '请输入性别' },
    { label: '身份证号', key: 'idCard', editable: true, placeholder: '请输入身份证号' },
    { label: '用户名', key: 'username', editable: false, placeholder: '不可编辑' },
    { label: '角色', key: 'role', editable: false, placeholder: '不可编辑' },
    { label: '地址', key: 'useraddress', editable: true, placeholder: '请输入地址' },
    { label: '手机号码', key: 'userphone', editable: true, placeholder: '请输入手机号码' },
    { label: '用户照片', key: 'userphoto', editable: true, placeholder: '请输入用户照片链接' },
];
  
  // 当前活动的标签
  const activeTab = ref('profile');
  
  // 更新用户信息函数
  const updateUserInfo = () => {
    console.log('提交的用户信息:', sanitizedUserInfo);
  };
  
  // 更新密码函数
  const updatePassword = () => {
    if (props.passwords.newPassword !== props.passwords.confirmPassword) {
      alert("新密码和确认密码不匹配！");
      return;
    }
    console.log('提交的密码信息:', props.passwords);
  };
  </script>
  
  <style scoped>
  .uc-main {
    padding: 20px; /* 设置主内容的内边距 */
  }
  
  .info-section {
    margin-bottom: 20px; /* 每个信息部分底部间距 */
  }
  
  .info-row {
    margin: 0; /* 消除行间距 */
  }
  
  .form-item {
    margin-bottom: 10px; /* 每个表单项的底部间距 */
  }
  
  .el-input {
    width: 100%; /* 确保输入框宽度100%以便对齐 */
  }
  </style>
  